<template>
  <div>
    <div class="dialog" v-if="userinfoshow && userObj!='{}'">
      <div class="one">
        <div class="title">客户信息</div>
        <div class="cont">
          <div class="li">
            <div><span>姓名：{{userObj.name}}</span></div>
            <div><span>性别：{{userObj.gender==1?'男':'女'}}</span></div>
          </div>
          <div class="li">
            <div><span>出生日期：{{ userObj.dateOfBirth }}</span></div>
            <div><span>民族：{{ userObj.ethnicity }}</span></div>
          </div>
          <div class="li">
            <div><span>手机号：{{ userObj.phoneNumber}}</span></div>
            <div><span>婚姻情况：{{ userObj.maritalStatus==1?'已婚':'未婚' }}</span></div>
          </div>
          <div class="li">
            <div><span>家庭住址：{{ userObj.detailedAddress }}</span></div>
            <div><span></span></div>
          </div>
        </div>
      </div>
      <div class="two">
        <div class="title">业务记录</div>
        <table>
          <tr>
            <th>业务号</th>
            <th>服务类型</th>
            <th>服务商家</th>
            <th>状态</th>
          </tr>
          <tr>
            <td>1000000</td>
            <td>居家服务</td>
            <td>浙江广亦有限公司</td>
            <td>已完成</td>
          </tr>
          
        </table>
      </div>
      <div class="three">
        <div class="title">
          <div>工单记录</div>
          <div class="btn">
              <el-button type="primary">创建工单</el-button>
            </div>
        </div>
        <table>
          <tr>
            <th>业务号</th>
            <th>服务类型</th>
            <th>服务商家</th>
            <th>状态</th>
          </tr>
          <tr>
            <td>1000000</td>
            <td>居家服务</td>
            <td>浙江广亦有限公司</td>
            <td>已完成</td>
          </tr>
          
        </table>
      </div>
    </div>
    <div class="userlist scroll-container" v-if="userList.length>0"  ref="scrollContainer" @scroll="handleScroll">
      <ul>
        <li v-for="(item,i) in userList" :key="i">
          <div class="left">{{ item.customerType==0?'游客':item.customerName[0]}}</div>
          <div class="right">
            <div>{{ item.customerType==0?item.callingNumber:item.customerName}}</div>
            <div class="time">{{ item.dateDesc }}</div>
          </div>
        </li>
      </ul>
      <div v-if="loading" class="loading">加载中...</div>
    </div>
  </div>
  <div @click="openWorkbench()" class="mini-workbench">云呼</div>
  <!-- 云呼挂载元素id -->
  <div id="workbench"></div>
</template>
<script setup lang="ts">
import { getToken, setToken, getAppId } from '@/common/utils/index';
import { TuserlistController } from '@/api/tel';
import { onMounted, ref } from 'vue';

let userList=ref([]);
const loading = ref(false);
const pageSize = ref(20);// 每页加载的数据量
const pageNumber = ref(1); 
const scrollContainer = ref(null);

let userObj=ref({})

onMounted(() => {
  getuserlist();
})

//获取客户列表
function getuserlist() {
  if (loading.value) return; // 防止重复请求
  loading.value = true;
  let obj={
    pageSize:pageSize.value,
    pageNumber:pageNumber.value
  };
  TuserlistController.getuser(obj)
      .then(res => {
        userList.value = [...userList.value, ...res.data.listVo];
        pageSize.value++; // 增加页码
        loading.value = false;
      }).catch(err => {
        loading.value = false;
      });
};
//滚动加载数据
const handleScroll = () => {
  const { scrollTop, scrollHeight, clientHeight } = scrollContainer.value;
  if (scrollTop + clientHeight >= scrollHeight - 10) { // 当滚动到底部时触发加载更多数据
    console.log('加载更多数据');
    getuserlist();
  }
};
//获取来电信息
function getCallInfo(tel) {
  let obj={
    phone:tel
  }
  TuserlistController.getCallInfo(obj)
    .then(res => {
      userObj.value = res.data;
    })
};

 const token = getToken();
let userinfoshow = ref(false);
const script = document.createElement('script');
// script.src = 'https://g.alicdn.com/code/npm/@ali/cc-im-sdk/1.2.2/index.js';
script.src = 'https://g.alicdn.com/cloudcallcenter/web-workbench-sdk/3.3.5/ui.min.js';
script.onload = () => {
  window.workbench = new window.CCCWorkbenchSDK({
    dom: 'workbench', // UI版本必填，且在 id为workbench-container的dom加载完成后初始化
    instanceId: 'demo-1950916617864394', // 呼叫中心实例 ID
    exportErrorOfApi: true,
    afterCallRule: 15, // 话后处理时长
    ajaxPath: process.env.VUE_APP_SERVER_HOST + '/workbenches/service/forward', // 根据后端接口地址更改
    ajaxHeaders:{
      'Authorization':token
    },
    logger: {
      builtinEnabled: false,
    },
    functionSwitch:{
      allowCreateTicket:false
    },
    imConfig: {
      getContainer() {
        return document.getElementById('im-container');
      },
    },
    onInit() {
      console.log('onInit');
     
    },
    onRegister(event) {
      console.log('onRegister', event);
    },
    onLogIn(event) {
      console.log('onLogIn', event);
    },
    onBreak(event) {
      console.log('onBreak', event);
    },
    onChangeInvisibility(event) {
      console.log('onChangeInvisibility', event);
    },
    onReady() {
      console.log('onReady');
    },
    onCallComing(event) {
       userinfoshow.value = true;
       getCallInfo(event.caller);
       getuserlist();
    },
    onCallDialing(event) {
      console.log('onCallDialing', event);
    },
    onCallEstablish(event) {
      console.log('onCallEstablish', event);
    },
    onCallRelease(event) {
      console.log('onCallRelease', event);
    },
    onDeviceTypeChange(event) {
      console.log('onDeviceTypeChange', event);
    },
    // onErrorNotify(event) {
    //   console.log('onErrorNotify', event);
    // },
    onHangUp(event) {
      console.log('onHangUp', event);
    },
    onLogOut() {
      console.log('onLogOut');
    },
    onSelectOutboundNumber(event) {
      console.log('onSelectOutboundNumber', event);
    },
    onStatusChange(event) {
      console.log('onStatusChange', event);
    },
    onWorkModeChange(event) {
      console.log('onWorkModeChange', event);
    },
    onBeforeCallDialing(payload) {
      console.log('onBeforeCallDialing', payload);
      payload.callback(); // 必须调用
    },
    onBeforeCallHangup(payload) {
      console.log('onBeforeCallHangup', payload);
      payload.callback();
    },
    onAgentStats(event) {
      console.log('onAgentStats', event);
    },
    onSelectCurrentCallRecord(event) {
      console.log('onSelectCurrentCallRecord', event);
    },
    onAfterEarlyMediaRecognized(event) {
      console.log('onAfterEarlyMediaRecognized', event);
    },
    onSignedSkillGroupChange(signedSkillGroupList) {
      console.log('onSignedSkillGroupChange', signedSkillGroupList);
    },
    onBeingMonitored(event) {
      console.log('onBeingMonitored', event);
    },
    onIvrTrackingAISummary(event) {
      console.log('onIvrTrackingAISummary', event);
    },
  });
};
//面板展示开关
window.workbenchOpen = true;
function openWorkbench() {
  var workbenchWrapper = document.querySelector('#workbench');
  var floater = document.querySelector('.mini-workbench');
  window.workbench.changeVisible(window.workbenchOpen);
  if (!window.workbenchOpen) {
    workbenchWrapper.style.display = 'none';
    floater.innerHTML = '云呼';
  } else {
    workbenchWrapper.style.display = 'block';
    floater.innerHTML = 'X';
  }
  window.workbenchOpen = !window.workbenchOpen;
}
document.head.appendChild(script);
</script>
<style lang="scss" scoped>
@import url('https://g.alicdn.com/cloudcallcenter/web-workbench-sdk/3.3.5/ui.min.css');
.mini-workbench {
  position: fixed;
  border-radius: 100%;
  height: 50px;
  line-height: 50px;
  width: 50px;
  text-align: center;
  background: #00c1de;
  color: white;
  cursor: pointer;
  bottom: 44px;
  right: 0px;
}

.dialog {
  background: gainsboro;
  float: right;
  padding: 20px;
  border-radius: 10px;
   height: 100vh;
   margin-left: 10px;
  .one {
    background: white;
    padding: 20px;
     border-radius: 10px;
    .title {
      font-size: 18px;
    }
    .cont {
      margin-top: 10px;
      .li {
        display: flex;
        gap: 40px;
        div {
          flex: 1;
          margin-bottom: 10px;
          display: flex;
          justify-content: space-between;
          text-align: right;
          span {
            display: inline-block;
            text-align: right;
          }
        }
      }
    }
  }
  .two {
     border-radius: 10px;
    background: white;
    padding: 20px;
    margin-top: 10px;
    .title {
      font-size: 18px;
    }
    table{
      margin-top: 10px;
      tr{
        display: flex;
        gap: 40px;
       text-align: center;
        th,td{
          flex: 1;
        }
      }
    }
  }
  .three {
     border-radius: 10px;
    background: white;
    padding: 20px;
    margin-top: 10px;
    .title {
      font-size: 18px;
      display: flex;
      justify-content: space-between;
    }
    table{
      margin-top: 10px;
      tr{
        display: flex;
        gap: 40px;
       text-align: center;
        th,td{
          flex: 1;
        }
      }
    }
  }
}

#workbench {
  position: absolute;
  left: 0px;
  top: 0px;
}
.userlist{
    background: gainsboro;
  float: right;
  padding: 20px;
  border-radius: 10px;
  height: 100vh;
  li{
    display: flex;
    gap: 20px;
    background: white;
    margin-bottom: 10px;
     padding: 10px;
     border-radius: 10px;
     align-items: center;
  }
  .left{
    width: 50px;
    height: 50px;


    border-radius: 50%;
    background-color: #00c1de;
    text-align: center;
    line-height: 50px;
    color: white;
    img{
      width: 50px;
      height: 50px;
      border-radius: 50%;
    }
  }
  .right{
    min-width: 200px;
    .time{
      font-size: 14px;
      color: gray;
      margin-top: 10px;
    }
  }
}
.scroll-container {
  overflow-y: auto;
}
.loading {
  text-align: center;
  padding: 10px;
}
</style>